<template>
  <div class="messages-container">
    <!-- 顶部导航栏 -->
    <div class="top-tabs">
      <el-tabs v-model="activeTab" class="custom-tabs" @tab-change="handleTabChange">
        <el-tab-pane label="用户消息" name="chat" />
        <el-tab-pane label="智能客服设置" name="ai" />
      </el-tabs>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 聊天界面 -->
      <div v-show="activeTab === 'chat'" class="chat-section">
        <!-- 左侧用户列表 -->
        <div class="user-list">
          <div class="user-list-header">
            <el-input
              v-model="searchQuery"
              placeholder="搜索用户"
              prefix-icon="Search"
              clearable
            />
          </div>
          <div class="user-list-content">
            <el-scrollbar>
              <el-empty v-if="!userChats.length" description="暂无聊天记录" />
              <div
                v-for="user in filteredUsers"
                :key="user.id"
                class="user-item"
                :class="{ active: currentUser?.id === user.id }"
                @click="selectUser(user)"
              >
                <el-badge :value="user.unread" :hidden="!user.unread" class="user-badge">
                  <el-avatar :src="user.avatar" :size="40">
                    {{ user.username.charAt(0).toUpperCase() }}
                  </el-avatar>
                </el-badge>
                <div class="user-info">
                  <div class="user-name-time">
                    <span class="username">{{ user.username }}</span>
                    <span class="last-time">{{ formatTime(user.lastMessageTime) }}</span>
                  </div>
                  <div class="last-message" :class="{ unread: user.unread }">
                    {{ user.lastMessage }}
                  </div>
                </div>
              </div>
            </el-scrollbar>
            <div class="pagination">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50]"
                :total="total"
                layout="total, sizes, prev, pager, next"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>

        <!-- 右侧聊天窗口 -->
        <div class="chat-window">
          <template v-if="currentUser">
            <div class="chat-header">
              <div class="chat-header-info">
                <span class="current-user-name">{{ currentUser.username }}</span>
                <span class="user-status">{{ currentUser.online ? '在线' : '离线' }}</span>
              </div>
              <div class="chat-header-actions">
                <el-tooltip content="查看用户信息">
                  <el-button link @click="showUserInfo">
                    <el-icon><InfoFilled /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="清空聊天记录">
                  <el-button link @click="clearHistory">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </div>

            <div class="messages" ref="messagesContainer">
              <el-scrollbar view-class="messages-list">
                <el-empty v-if="!messages.length" description="暂无消息" />
                <template v-if="messages.length">
                  <div class="messages-date-divider">
                    <span>{{ formatDate(new Date()) }}</span>
                  </div>
                  <div
                    v-for="msg in messages"
                    :key="msg.id"
                    :class="['message-wrapper', msg.sender === 'user' ? 'received' : 'sent']"
                  >
                    <!-- {{ console.log('Message sender:', msg.sender, 'Content:', msg.content) }} -->
                    <div class="message-time">{{ formatMessageTime(msg.created_at) }}</div>
                    <div class="message">
                      <el-avatar
                        :size="30"
                        :src="msg.sender === 'user' ? msg.userAvatar : adminAvatar"
                      />
                      <div class="message-content">
                        {{ msg.content }}
                      </div>
                    </div>
                  </div>
                </template>
              </el-scrollbar>
            </div>

            <div class="message-input">
              <div class="input-toolbar">
                <div class="toolbar-buttons">
                  <el-tooltip content="发送图片">
                    <el-upload
                      action="/api/upload"
                      :show-file-list="false"
                      :on-success="handleImageUpload"
                      accept="image/*"
                    >
                      <el-button link>
                        <el-icon><Picture /></el-icon>
                      </el-button>
                    </el-upload>
                  </el-tooltip>
                  <el-tooltip content="发送表情">
                    <el-button link @click="showEmojiPicker">
                      <el-icon><ChatRound /></el-icon>
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="快捷回复">
                    <el-dropdown trigger="click" @command="handleQuickReply">
                      <el-button link>
                        <el-icon><ChatLineSquare /></el-icon>
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item v-for="reply in quickReplies" 
                            :key="reply.id" 
                            :command="reply.content"
                          >
                            {{ reply.content }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </el-tooltip>
                </div>
              </div>
              <div class="input-area">
                <el-input
                  v-model="messageInput"
                  type="textarea"
                  :rows="3"
                  placeholder="输入消息..."
                  resize="none"
                  @keyup.enter.exact="sendMessage"
                  @keyup.ctrl.enter="messageInput += '\n'"
                />
                <el-button type="primary" @click="sendMessage" :disabled="!messageInput.trim()">
                  发送
                </el-button>
              </div>
            </div>
          </template>
          <div v-else class="no-chat-selected">
            <el-empty description="选择一个用户开始对话" />
          </div>
        </div>
      </div>

      <!-- 智能客服设置界面 -->
      <div v-show="activeTab === 'ai'" class="ai-settings-section">
        <div class="section-header">
          <h2>自动回复规则</h2>
          <el-button type="primary" @click="showAddRuleDialog">
            添加规则
          </el-button>
        </div>

        <!-- 规则列表 -->
        <div class="rules-section">
          <el-table :data="aiSettings.qaList" style="width: 100%">
            <el-table-column label="触发关键词" prop="keywords">
              <template #default="{ row }">
                {{ row.keywords }}
              </template>
            </el-table-column>
            <el-table-column label="回复内容" prop="answer">
              <template #default="{ row }">
                {{ row.answer }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="{ $index }">
                <el-button 
                  type="danger" 
                  link
                  @click="removeQA($index)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 用户信息抽屉 -->
    <el-drawer
      v-model="userInfoDrawer"
      title="用户信息"
      direction="rtl"
      size="300px"
    >
      <div class="user-info-drawer">
        <div class="user-info-header">
          <el-avatar :src="currentUser?.avatar" :size="80">
            {{ currentUser?.username.charAt(0).toUpperCase() }}
          </el-avatar>
          <h3>{{ currentUser?.username }}</h3>
        </div>
        <div class="user-info-content">
          <div class="info-item">
            <label>用户ID</label>
            <span>{{ currentUser?.id }}</span>
          </div>
          <div class="info-item">
            <label>手机号</label>
            <span>{{ currentUser?.phone }}</span>
          </div>
          <div class="info-item">
            <label>邮箱</label>
            <span>{{ currentUser?.email }}</span>
          </div>
          <div class="info-item">
            <label>积分</label>
            <span>{{ currentUser?.points }}</span>
          </div>
        </div>
        <div class="user-info-actions">
          <el-button type="primary" @click="viewUserOrders">查看订单</el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 添加规则对话框 -->
    <el-dialog
      v-model="ruleDialogVisible"
      title="添加回复规则"
      width="500px"
    >
      <el-form :model="newRule" label-width="100px">
        <el-form-item 
          label="触发关键词" 
          prop="question"
          :rules="[{ required: true, message: '请输入关键词' }]"
        >
          <el-input 
            v-model="newRule.question"
            placeholder="多个关键词用逗号分隔"
          />
        </el-form-item>
        <el-form-item 
          label="回复内容" 
          prop="answer"
          :rules="[{ required: true, message: '请输入回复内容' }]"
        >
          <el-input
            v-model="newRule.answer"
            type="textarea"
            :rows="4"
            placeholder="请输入回复内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="ruleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addRule">确定</el-button>
      </template>
    </el-dialog>

    <!-- 订单详情对话框 -->
    <el-dialog
      v-model="orderDialogVisible"
      :title="`${currentUser?.username}的订单记录`"
      width="800px"
    >
      <div class="order-dialog-content">
        <el-table
          v-loading="orderLoading"
          :data="userOrders"
          style="width: 100%"
          max-height="500px"
        >
          <el-table-column prop="order_id" label="订单号" width="120" />
          <el-table-column prop="created_at" label="下单时间" width="160">
            <template #default="{ row }">
              {{ formatTime(row.created_at) }}
            </template>
          </el-table-column>
          <el-table-column prop="total_amount" label="金额" width="100">
            <template #default="{ row }">
              ¥{{ row.total_amount.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 'completed' ? 'success' : 'info'">
                {{ formatOrderStatus(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单详情">
            <template #default="{ row }">
              <div class="order-items">
                <div v-for="item in row.items" :key="item.id" class="order-item">
                  {{ item.dish_name }} x{{ item.quantity }}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import {
  InfoFilled,
  Delete,
  Picture,
  ChatLineSquare,
  Check,
  Search,
  ChatRound,
  CircleCheck
} from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import axios from 'axios'

const store = useStore()
const route = useRoute()

// 格式化时间的工具函数
const formatTime = (time) => {
  if (!time) return ''
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

const formatMessageTime = (time) => {
  if (!time) return ''
  return dayjs(time).format('HH:mm')
}

const formatDate = (date) => {
  if (!date) return ''
  return dayjs(date).format('YYYY年MM月DD日')
}

// 标签页控制
const activeTab = ref('chat')

// 用户聊天相关
const userChats = ref([])
const currentUser = ref(null)
const messages = ref([])
const messageInput = ref('')
const pollingInterval = ref(null)


// 订单通知相关
const orderNotifications = ref([])

// 智能客服设置
const aiSettings = ref({
  enabled: false,
  qaList: []
})

// 新增的状态
const searchQuery = ref('')
const userInfoDrawer = ref(false)
const adminAvatar = ref(store.state.user?.avatar || '/default-avatar.jpg')
const quickReplies = ref([
  { id: 1, content: '您好,请问有什么可以帮您?' },
  { id: 2, content: '好的,我明白了' },
  { id: 3, content: '请稍等,我帮您处理' },
  { id: 4, content: '还有其他问题吗?' }
])
const ruleDialogVisible = ref(false)
const newRule = ref({
  question: '',
  answer: ''
})

// 订单相关状态
const orderDialogVisible = ref(false)
const userOrders = ref([])
const orderLoading = ref(false)

// 添加分页相关的状态
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 过滤用户列表
const filteredUsers = computed(() => {
  if (!searchQuery.value) return userChats.value
  const query = searchQuery.value.toLowerCase()
  return userChats.value.filter(user => 
    user.username.toLowerCase().includes(query)
  )
})

// 修改加载用户聊天列表的方法
const loadUserChats = async () => {
  try {
    const { data } = await axios.get(`/admin/messages/chats`, {
      params: {
        page: currentPage.value,
        page_size: pageSize.value
      },
      headers: {
        'Authorization': `Bearer ${store.state.token}`
      }
    })

    if (data && data.chats) {
      userChats.value = data.chats
      total.value = data.total || data.chats.length
    }
  } catch (error) {
    console.error('加载用户列表失败:', error)
    ElMessage.error('加载用户列表失败')
  }
}

// 加载聊天记录
const loadChatMessages = async (user) => {
  if (!user) return
  currentUser.value = user
  try {
    console.log('Loading messages for user:', user)
    const response = await fetch(`http://localhost:8080/api/admin/messages/chat/${user.id}`, {
      headers: {
        'Authorization': `Bearer ${store.state.token}`
      }
    })
    const data = await response.json()
    console.log('Loaded messages data:', data)
    if (Array.isArray(data.messages)) {
      messages.value = data.messages.map(msg => ({
        ...msg,
        sender: msg.SenderType || msg.sender,
        userAvatar: user.avatar
      }))
      console.log('Processed messages:', messages.value)
    } else {
      console.error('Invalid messages data:', data)
      messages.value = []
    }
    scrollToBottom()
  } catch (error) {
    console.error('加载聊天记录失败:', error)
    messages.value = []
  }
}

// 选择用户
const selectUser = async (user) => {
  if (!user || !user.user_id) return
  console.log('Selecting user:', user)
  currentUser.value = user
  try {
    await loadChatMessages({ ...user, id: user.user_id })
  } catch (error) {
    console.error('选择用户失败:', error)
  }
}

// 显示用户信息
const showUserInfo = () => {
  console.log('showUserInfo', currentUser.value)
  userInfoDrawer.value = true
}

// 清空聊天记录
const clearHistory = async () => {
  try {
    await ElMessageBox.confirm('确定要清空聊天记录吗?', '提示', {
      type: 'warning'
    })
    // 调用清空API
    messages.value = []
    ElMessage.success('清空成功')
  } catch (error) {
    // 用户取消操作
  }
}

// 发送消息
const sendMessage = async () => {
  const content = messageInput.value.trim()
  if (!content || !currentUser.value) return
  
  try {
    await axios.post('/admin/messages/send', {
      user_id: currentUser.value.user_id,
      content: content,
      type: 'text'
    }, {
      headers: {
        'Authorization': `Bearer ${store.state.token}`
      }
    })
    messageInput.value = ''
    await loadChatMessages(currentUser.value)
    scrollToBottom()
  } catch (error) {
    console.log('Error details:', error.response?.data)
    console.error('发送消息失败:', error)
    ElMessage.error('发送失败')
  }
}

// 处理快捷回复
const handleQuickReply = async (content) => {
  if (!currentUser.value) return
  await sendMessage()
}

// 处理图片上传
const handleImageUpload = async (response) => {
  if (!currentUser.value) return
  await sendMessage()
}

// 滚动到底部
const scrollToBottom = async () => {
  await nextTick()
  const container = document.querySelector('.messages .el-scrollbar__wrap')
  if (container) {
    container.scrollTop = container.scrollHeight
  }
}

// 显示添加规则对话框
const showAddRuleDialog = () => {
  newRule.value = {
    question: '',
    answer: ''
  }
  ruleDialogVisible.value = true
}

// 添加规则
const addRule = () => {
  if (!newRule.value.question || !newRule.value.answer) {
    ElMessage.warning('请填写完整的规则信息')
    return
  }
  
  aiSettings.value.qaList.push({
    keywords: newRule.value.question,
    answer: newRule.value.answer
  })
  
  ruleDialogVisible.value = false
  saveAISettings() // 保存到数据库
}

// 删除规则
const removeQA = (index) => {
  aiSettings.value.qaList.splice(index, 1)
}

// 切换标签页时的处理
const handleTabChange = (tab) => {
  if (tab === 'chat') {
    startPolling()
  } else {
    stopPolling()
    loadAISettings()
  }
}

// 开始轮询
const startPolling = () => {
  pollingInterval.value = setInterval(() => {
    loadUserChats()
    if (currentUser.value) {
      loadChatMessages(currentUser.value)
    }
  }, 2000)
}

// 停止轮询
const stopPolling = () => {
  if (pollingInterval.value) {
    clearInterval(pollingInterval.value)
    pollingInterval.value = null
  }
}

// 加载AI配置
const loadAISettings = async () => {
  try {
    const response = await fetch('http://localhost:8080/api/admin/ai/config', {
      headers: {
        'Authorization': `Bearer ${store.state.token}`
      }
    })
    const data = await response.json()
    console.log('Loaded AI settings:', data)
    if (response.ok) {
      aiSettings.value = {
        enabled: data.config.Enabled,
        qaList: data.rules.map(rule => ({
          keywords: rule.Keywords,
          answer: rule.Answer
        }))
      }
      console.log('Processed AI settings:', aiSettings.value)
    }
  } catch (error) {
    console.error('Load AI settings error:', error)
    ElMessage.error('加载AI配置失败')
  }
}

const saveAISettings = async () => {
  try {
    console.log('Saving AI settings:', {
      enabled: aiSettings.value.enabled,
      name: "智能助手",
      rules: aiSettings.value.qaList.map(qa => ({
        keywords: qa.keywords,
        answer: qa.answer
      }))
    })
    const response = await fetch('http://localhost:8080/api/admin/ai/config', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${store.state.token}`
      },
      body: JSON.stringify({
        enabled: aiSettings.value.enabled,
        name: "智能助手",
        rules: aiSettings.value.qaList.map(qa => ({
          keywords: qa.keywords,
          answer: qa.answer
        }))
      })
    })
    const data = await response.json()
    if (!response.ok) throw new Error(data.error || '保存失败')
    ElMessage.success('保存成功')
    loadAISettings()  // 保存后重新加载
  } catch (error) {
    console.error('Save error:', error)
    ElMessage.error(error.message || '保存失败')
  }
}

// 查看用户订单
const viewUserOrders = async () => {
  if (!currentUser.value?.user_id) return
  
  orderLoading.value = true
  orderDialogVisible.value = true
  
  try {
    const { data } = await axios.get(`/admin/users/${currentUser.value.user_id}/orders`, {
      headers: {
        'Authorization': `Bearer ${store.state.token}`
      }
    })
    userOrders.value = data.orders
  } catch (error) {
    console.error('获取用户订单失败:', error)
    ElMessage.error('获取订单失败')
  } finally {
    orderLoading.value = false
  }
}

// 格式化订单状态
const formatOrderStatus = (status) => {
  const statusMap = {
    pending: '待支付',
    paid: '已支付',
    preparing: '准备中',
    delivering: '配送中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

// 添加分页处理方法
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  loadUserChats()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadUserChats()
}

onMounted(async () => {
  console.log('Messages component mounted')
  console.log('Current route:', route.path)
  console.log('Current user:', store.state.user)
  try {
    loadUserChats()
    loadAISettings()
  } catch (error) {
    console.error('Failed to load chats:', error)
    ElMessage.error('加载聊天列表失败')
  }
  startPolling()
})

onUnmounted(() => {
  stopPolling()
})
</script>

<style scoped>
.messages-container {
  padding: 20px;
  height: calc(100vh - 120px);
  margin: -20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 顶部导航栏样式 */
.top-tabs {
  background: #fff;
  border-radius: 4px;
  padding: 10px 20px;
  border: 1px solid #dcdfe6;
  margin-bottom: 20px;
}

.main-content {
  flex: 1;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}

/* 聊天界面样式 */
.chat-section {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* 用户列表样式 */
.user-list {
  width: 280px;
  border-right: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
  background: #fff;
  height: 100%;
}

.user-item {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 1px solid #f5f7fa;

  &:hover {
    background-color: #f0f2f5;
  }

  &.active {
    background-color: #e6e6e6;
  }
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.username {
  font-weight: 500;
  color: #303133;
  font-size: 14px;
}

.last-time {
  font-size: 12px;
  color: #909399;
}

.last-message {
  font-size: 13px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &.unread {
    color: #303133;
    font-weight: 500;
  }
}

/* 聊天窗口样式 */
.chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: #f5f7fa;
}

.chat-header {
  padding: 15px 20px;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f7fa;
  flex-shrink: 0;
  height: 60px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.messages {
  flex: 1;
  padding: 20px;
  background: #f5f7fa;
  overflow-y: auto;
}

.message-input {
  border-top: 1px solid #dcdfe6;
  background: #fff;
  padding: 10px 20px;
}

.input-area {
  display: flex;
  gap: 10px;
}

/* 智能客服设置界面样式 */
.ai-settings-section {
  height: 100%;
  padding: 20px;
}

.section-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rules-section {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

/* 用户信息抽屉样式 */
.user-info-drawer {
  padding: 20px;
}

.user-info-header {
  text-align: center;
  margin-bottom: 30px;

  h3 {
    margin-top: 15px;
    color: #303133;
  }
}

.info-item {
  margin-bottom: 20px;

  label {
    display: block;
    color: #909399;
    margin-bottom: 5px;
  }

  span {
    color: #303133;
  }
}

.user-info-actions {
  margin-top: 30px;
  text-align: center;
}

/* 系统通知界面样式 */
.notification-section {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.notification-section :deep(.el-table) {
  flex: 1;
  overflow: auto;
}

/* 订单通知界面样式 */
.order-notification-section {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.order-notification-section :deep(.el-table) {
  flex: 1;
  overflow: auto;
}

/* 滚动条美化 */
:deep(.el-scrollbar__bar) {
  &.is-horizontal {
    display: none;
  }

  &.is-vertical {
    width: 6px;
    right: 2px;
    
    .el-scrollbar__thumb {
      background-color: rgba(144, 147, 153, 0.3);
      border-radius: 3px;
      
      &:hover {
        background-color: rgba(144, 147, 153, 0.5);
      }
    }
  }
}

/* 添加样式 */
.rules-section {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.rules-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.rules-header h3 {
  margin: 0;
}

.message-wrapper {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.message-wrapper.sent {
  align-items: flex-end;
}

.message-wrapper.received {
  align-items: flex-start;
}

.message {
  display: flex;
  align-items: flex-start;
  max-width: 70%;
}

.message-wrapper.sent .message {
  flex-direction: row-reverse;
}

.message-content {
  margin: 0 10px;
  padding: 10px 15px;
  border-radius: 4px;
  word-break: break-word;
}

.message-wrapper.sent .message-content {
  background-color: #95ec69;
  border-radius: 15px 0 15px 15px;
}

.message-wrapper.received .message-content {
  background-color: #fff;
  border-radius: 0 15px 15px 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-time {
  font-size: 12px;
  color: #999;
  margin: 5px 0;
}

.input-toolbar {
  padding: 8px 20px;
  border-bottom: 1px solid #f0f2f5;
  background-color: #f5f7fa;
}

.toolbar-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar-buttons .el-button {
  padding: 8px;
}

.order-items {
  font-size: 14px;
  color: #666;
}

.order-item {
  margin: 4px 0;
}

.pagination {
  padding: 15px;
  background: #fff;
  border-top: 1px solid #dcdfe6;
  display: flex;
  justify-content: flex-end;
}

.user-list-content {
  flex: 1;
  overflow: hidden;
}

/* 添加订单对话框的样式 */
.order-dialog-content {
  max-height: 500px;
  overflow-y: auto;
}

/* 美化滚动条 */
.order-dialog-content::-webkit-scrollbar {
  width: 6px;
}

.order-dialog-content::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 3px;
}

.order-dialog-content::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}

/* 表格内容的样式 */
.order-items {
  max-height: 100px;
  overflow-y: auto;
  padding: 5px 0;
}

.order-item {
  padding: 2px 0;
  border-bottom: 1px dashed #ebeef5;
  &:last-child {
    border-bottom: none;
  }
}
</style> 